<template>
  <div>
    <a-button @click="visible = true">{{ t["分配"] }}</a-button>
    <a-modal v-model:visible="visible" :title="t['分配']" :footer="false" width="800px">
      <div class="flex gap-4">
        <div class="flex-1">
          <a-alert class="mb-2"> {{ t["选择门店迁移"] }} </a-alert>
          <a-card class="flex-1 flex">
            <StoreSelector v-model="targetStore" mode="list"></StoreSelector>
            <div class="text-right">
              <a-button type="primary" @click="translateDevice">{{ t["确定"] }}</a-button>
            </div>
          </a-card>
        </div>
        <div class="flex-1">
          <a-alert class="mb-2" type="normal"> {{ t["使用EXCEL批量迁移"] }} </a-alert>
          <BulkOperation @success="success" url="/station/station/shift/xlsx">
            <h3>{{ t["批量迁移"] }}</h3>
          </BulkOperation>
        </div>
      </div>
    </a-modal>
    <a-modal v-model:visible="showResult">
      <UploadResult v-bind="result" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { shiftStation } from "@/api/service/station/station";
import { FileItem } from "@arco-design/web-vue";
import { selectedKeys } from "../data";

const t = translate("公共模块");
const visible = ref();
const result = ref();
const showResult = ref();
const targetStore = ref<string>("");
const translateDevice = () => {
  shiftStation({
    list: selectedKeys.value,
    to: targetStore.value
  });
};

const success = (data: FileItem) => {
  result.value = data.response?.data;
  showResult.value = true;
};
</script>

<style lang="scss" scoped></style>
